<template>
  <div class="operlog"  style="padding: 15px">
    <el-form :model="selectForm" :rules="dialogRules" ref="dialogForm" label-width="120px" class="demo-dialogForm"
             inline>
      <el-form-item label="操作地址" prop="operIp">
        <el-input v-model="selectForm.operIp" placeholder="请输入操作地址"></el-input>
      </el-form-item>
      <el-form-item label="系统模块" prop="title">
        <el-input v-model="selectForm.title" placeholder="请输入系统模块"></el-input>
      </el-form-item>
      <el-form-item label="操作人员" prop="operName">
        <el-input v-model="selectForm.operName" placeholder="请输入操作人员"></el-input>
      </el-form-item>
      <el-form-item label="类型" prop="businessType">
        <el-select v-model="selectForm.businessType" placeholder="操作类型" clearable>
          <el-option label="新增" value="1"></el-option>
          <el-option label="修改" value="2"></el-option>
          <el-option label="删除" value="3"></el-option>
          <el-option label="授权" value="4"></el-option>
          <el-option label="导出" value="5"></el-option>
          <el-option label="导入" value="6"></el-option>
          <el-option label="强退" value="7"></el-option>
          <el-option label="生成代码" value="8"></el-option>
          <el-option label="清空数据" value="9"></el-option>
          <el-option label="其他" value="10"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select v-model="selectForm.status" placeholder="操作状态" clearable>
          <el-option label="成功" value="0"></el-option>
          <el-option label="失败" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="操作时间">
        <el-date-picker
            v-model="selectForm.operTime"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="selectButton">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-button type="danger" plain icon="el-icon-delete" @click="deleteLogHandler">删除</el-button>
      <el-button type="danger" plain icon="el-icon-delete" @click="clearLogHandler">清空</el-button>
      <el-button type="warning" plain icon="el-icon-download">导出</el-button>
    </el-row>

    <el-table
        ref="multipleTable"
        :data="logs"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
      <el-table-column type="selection">
      </el-table-column>
      <el-table-column prop="operId" label="日志编号">
      </el-table-column>
      <el-table-column prop="title" label="系统模块">
      </el-table-column>
      <el-table-column prop="businessType" label="操作类型">
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.businessType===1 ">新增</el-tag>
          <el-tag type="success" v-else-if="scope.row.businessType===2 ">修改</el-tag>
          <el-tag type="danger" v-else-if="scope.row.businessType===3 ">删除</el-tag>
          <el-tag type="success" v-else-if="scope.row.businessType===4 ">授权</el-tag>
          <el-tag type="warning" v-else-if="scope.row.businessType===5 ">导出</el-tag>
          <el-tag type="warning" v-else-if="scope.row.businessType===6 ">导入</el-tag>
          <el-tag type="warning" v-else-if="scope.row.businessType===7 ">强退</el-tag>
          <el-tag type="warning" v-else-if="scope.row.businessType===8 ">生成代码</el-tag>
          <el-tag type="danger" v-else-if="scope.row.businessType===9 ">清空数据</el-tag>
          <el-tag type="danger" v-else>其他</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="operName" label="操作人员">
      </el-table-column>
      <el-table-column prop="operIp" label="操作地址" width="140">
      </el-table-column>
      <el-table-column prop="operLocation" label="操作地点">
      </el-table-column>
      <el-table-column prop="status" label="操作状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status===0 ">成功</el-tag>
          <el-tag type="danger" v-else>失败</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="operTime" label="操作日期" width="160">
      </el-table-column>
      <el-table-column prop="costTime" label="消耗时间">
        <template slot-scope="scope">
          {{ scope.row.costTime + "毫秒" }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-view" @click="handleView(scope.row,scope.index)">详细</el-button>
        </template>
      </el-table-column>
    </el-table>


    <el-dialog title="操作日志详细" :visible.sync="open" width="800px">
      <el-form ref="form" :data="openForm" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="操作模块：">
              {{ openForm.title }} / {{ openForm.requestMethod }}
            </el-form-item>
            <el-form-item
                label="登录信息："
            >{{ openForm.operName }} / {{ openForm.operIp }} / {{ openForm.operLocation }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求地址：">{{ openForm.operUrl }}</el-form-item>
            <el-form-item label="请求方式：">{{ openForm.requestMethod }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="操作方法：">{{ openForm.method }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="请求参数：">{{ openForm.operParam }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="返回参数：">{{ openForm.jsonResult }}</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作状态：">
              <div v-if="openForm.status === 0">正常</div>
              <div v-else-if="openForm.status === 1">失败</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="消耗时间：">{{ openForm.costTime }}毫秒</el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="操作时间：">{{ openForm.operTime }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="异常信息：" v-if="openForm.status === 1">{{ openForm.errorMsg }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="open = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

const BASE_URL = "http://124.222.238.167/prod-api"
const TOKEN = "Bearer eyJhbGciOiJIUzUxMiJ9.eyJsb2dpbl91c2VyX2tleSI6IjZhMzEwZDk0LTJjNTUtNDZjMS05YzFlLTExNzZhNGU2ZTQ2YiJ9.SV7GbaZVdvzzJLi_AmF8Zjr5e53xOD3OU4ByL-XODmIYe8jlHZufg8pLDYSPIbzqsKvyzrDJUvfTp6dFzIWWXw"
export default {
  name: "OperlogView",
  data() {
    return {
      logs: [],
      selectForm: {
        operIp: '',
        title: '',
        operName: '',
        businessType: '',
        status: '',
        operTime: ''
      },
      openForm: {},
      open: false,
      dialogRules: {},
      multipleSelection: [],
      ids: []
    }
  },
  created() {
    this.listLog()
  },
  methods: {
    selectIds() {
      this.ids = this.multipleSelection.map(i => i.operId)
      // console.log(this.ids)
    },
    // 清空
    clearLogHandler() {
      this.$confirm('是否确认清空所有操作日志数据项？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios({
          url: BASE_URL + "/monitor/operlog/clean",
          method: 'DELETE',
          headers: {
            Authorization: TOKEN
          }
        }).then(res => {
          const data = res.data
          console.log(data)
          this.listLog()
        })
        this.$message.success("清空成功")
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 删除
    deleteLogHandler() {
      this.$confirm('是否确认删除日志编号为' + this.ids + '的数据项？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios({
          url: BASE_URL + "/monitor/operlog/" + this.ids,
          method: 'DELETE',
          headers: {
            Authorization: TOKEN
          }
        })
        this.$message.success("删除成功")
        this.listLog()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 查询渲染列表
    listLog() {
      axios({
        url: BASE_URL + "/monitor/operlog/list?pageNum=1&pageSize=10",
        method: "GET",
        params: {
          operIp: this.selectForm.operIp,
          title: this.selectForm.title,
          operName: this.selectForm.operName,
          businessType: this.selectForm.businessType,
          status: this.selectForm.status,
          //时间
        },
        headers: {
          Authorization: TOKEN
        }
      }).then(res => {
        // 异步请求成功后调用回调函数，callback
        const data = res.data
        if (data.code !== 200) {
          this.$message.error(data.msg)
          return
        }
        // console.log(res)
        this.logs = data.rows
      })
    },
    // ids
    handleSelectionChange(val) {
      console.log(val)
      this.multipleSelection = val;
      this.selectIds()
    },
    // 详细
    handleView(row) {
      this.open = true;
      this.openForm = row;
    },
    // 查询按钮
    selectButton() {
      this.listLog()
    },
    // 重置按钮
    reset() {
      this.selectForm = {}
      this.listLog()
    }
  }
}
</script>


<style scoped lang="scss">
.el-form {
  font-weight: bold;
}
</style>